<template>
    <div id="search">
        <div class="search-box">
            <div class="home-search">
                <textarea class="searchbox" placeholder="搜索想要看的书？" @focus="addFocus"></textarea>
            </div>
        </div>
    </div>
</template>

<script>


export default {
  // 添加数据
  data() {
    return {
      token: false,
      username: "",
    }
  },
  // 初始化钩子函数
  created() {

  },
  // 方法
  methods: {
    addFocus() {
      // 输入框获取焦点 跳转页面
      this.$router.push({ path: '/search' })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../common/less/varible.less';

#search {
    font-family: "华文行楷";
    overflow: hidden;
    
    .search-box {
        position: fixed;
        width: 100%;
        height:50px;
        // border: 1px solid pink;
        background-color:pink;
        display:flex;
        justify-content: center;
        align-items:center;

        .home-search {
            width: 90%;
            height: 40px;

            .searchbox {
                width: 100%;
                height: 100%;
                font-size: 18px;
                border: 0;
                box-sizing: border-box;
                white-space: nowrap;
                line-height: 210%;
                padding: 0 20px;
                color: transparent;
                border-radius: 10px;
                resize: none;
            }
        }

        .list {
            width: 100%;
            // border-top: 1px solid white;
            margin: 5px 0;
            // font-family: "华文行楷";
            font-family: "行楷"
        }

        .list-box {
            display: flex;
            width: 100%;
            // height: 60px;
            background-color: @bgColor;

            a {
                flex-shrink: 0;
                flex-basis: 20%;
                text-align: center;
                margin-top: 5px;
                // display:flex;
                justify-content: center;
                align-items: center;

                p {
                    font-size: 18px;
                }

                &.active {
                    color: @activeColor;
                }
            }
        }

    }
}
</style>